<template>
    <div>
        <web-header show="visa" />
        <div class="daohang_a">
            您的位置：
            <router-link to="/">首页</router-link> &gt;
            <router-link to="/visa">签证中心</router-link>
        </div>

        <div class="main">
            <div class="main-left">
                <div class="left-nav">
                    <div class="nav-menu" style="background-color: #0db770" id="nav-menu">
                        <ul>
                            <li class="off">签证国家</li>
                        </ul>
                    </div>
                    <div class="menu-div">
                        <div id="con_one_1">
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/PKDEcu.jpg"
                                        width="20" height="20" />
                                    <a href="javascript:void(0)">亚洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['亚洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/AEsBgM.jpg"
                                        width="20" height="20" />
                                    <a href="javascript:void(0)">欧洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['欧洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/kmnFUG.jpg"
                                        width="20" height="20" />
                                    <a href="javascript:void(0)">美洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['美洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/fRzmRP.jpg"
                                        width="20" height="20" />
                                    <a href="javascript:void(0)">澳洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['澳洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/gq7SWx.jpg"
                                        width="20" height="20" />
                                    <a href="javascript:void(0)">非洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['中东非']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>

                <div class="left-01">
                    <ul>
                        <li>
                            <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/icon-01.png" />拒签赔付
                        </li>
                        <li>
                            <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/icon-02.png" />急速办理
                        </li>
                        <li>
                            <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/icon-03.png" />资料安全
                        </li>
                    </ul>
                </div>

                <div class="left-03">
                    <div class="top">热门推荐</div>
                    <div class="bottom">
                        <!-- <volist name="coms" id="rs">
                            <dl>
                                <dt>
                                    <a href="/visa/{$rs.id}.html"><img
                                            src="https://admin.hqx.com.cn/Public/Uploads/{$rs.t_pic}" /></a>
                                </dt>
                                <dd>
                                    <a href="/visa/{$rs.id}.html">{$rs.title}</a>
                                    <span>￥{$rs.price}元/人</span>
                                </dd>
                            </dl>
                        </volist> -->
                        <dl v-for="rs in hotList" :key="rs.id">
                            <dt>
                                <router-link :to="`/visa/details/${rs.id}`">
                                    <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                                </router-link>
                            </dt>
                            <dd>
                                <router-link :to="`/visa/details/${rs.id}`">
                                    {{ rs.title }}
                                </router-link>
                                <span>￥{{ rs.price }}元/人</span>
                            </dd>
                        </dl>
                    </div>
                </div>

                <!-- <div class="left-04">
                    <dl>
                        <dt>常用下载</dt>
                        <volist name="downloads" id="rs">
                            <dd>
                                <a target="_blank" href="/Public/Uploads/{$rs.file}">{$rs.title}</a>
                            </dd>
                        </volist>
                    </dl>
                </div> -->

                <!-- <div class="left-04">
                    <dl>
                        <dt>签证资讯</dt>
                        <volist name="news" id="rs">
                            <dd>
                                <a target="_blank" href="/news/{$rs.id}.html">{$rs.title}</a>
                            </dd>
                        </volist>
                    </dl>
                </div> -->


            </div>
            <div class="main-right">
                <div class="form">
                    <div style="float: right">
                        <input id="type_" name="type" type="hidden" value="" />
                        <input v-model="searchValue" @keyup.enter="toSearch" class="text" type="text" name="name"
                            style="font-family: 微软雅黑" placeholder="输入您想签证的国家" />
                        <span @click="toSearch" class="btn"
                            style="float: left;border: none;height: 36px;line-height: 36px;">
                            搜索
                        </span>
                    </div>
                    <div class="down">
                        <p id="v_type">{{ searchIndex.title }}</p>
                        <span></span>
                        <ul id="type_list">

                            <li v-for="(rs, index) in searchTitle" :key="index" @click="searchChange(rs.id)">{{ rs.title
                                }}
                            </li>
                            <!-- <li @click="searchChange(4)">全部</li>
                            <li @click="searchChange(1)">旅游签证</li>
                            <li @click="searchChange(2)">商务签证</li>
                            <li @click="searchChange(3)">探亲签证</li> -->
                        </ul>
                    </div>
                </div>

                <div class="map" id="map">
                    <div @mouseenter="countryChange('亚洲')" class="asia">
                        <p><a href="javascript:void(0)">亚洲</a></p>
                    </div>
                    <div @mouseenter="countryChange('中东非')" class="africa">
                        <p><a href="javascript:void(0)">非洲</a></p>
                    </div>
                    <div @mouseenter="countryChange('欧洲')" class="eur">
                        <p><a href="javascript:void(0)">欧洲</a></p>
                    </div>
                    <div @mouseenter="countryChange('美洲')" class="america">
                        <p><a href="javascript:void(0)">北美洲</a></p>
                    </div>
                    <div @mouseenter="countryChange('美洲')" class="n-america">
                        <p><a href="javascript:void(0)">南美洲</a></p>
                    </div>
                    <div @mouseenter="countryChange('澳洲')" class="oce">
                        <p><a href="javascript:void(0)">澳洲</a></p>
                    </div>

                    <dl class="country country-asia">
                        <div id="map_con">
                            <div style="display: block">
                                <dt>{{ countryIndex }}：</dt>
                                <dd>
                                    <router-link v-for="rs in countryShow" :key="rs.id" :to="`/visa/list/${rs.id}`"
                                        target="_blank">
                                        {{ rs.title }}
                                    </router-link>

                                </dd>
                            </div>


                        </div>
                    </dl>
                </div>
                <div class="flow">
                    <a href="/line/269/" target="_blank"><img
                            src="https://admin.hqx.com.cn/Public/Travel/images/visa/flow01.jpg" /></a>
                </div>
                <div class="month">
                    <div class="tittle">
                        <h3>当月优惠</h3>
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/month-icon.jpg" />
                        <p>给力大优惠还犹豫呢，走起！</p>
                    </div>
                    <ul class="visa-con">
                        <!-- <volist name="sales" id="rs">
                            <li>
                                <a href="/visa/{$rs.id}.html">
                                    <div class="flag">
                                        <img src="https://admin.hqx.com.cn/Public/Uploads/{$rs.t_pic}" />
                                    </div>
                                    <h4>{$rs.title}</h4>
                                    <p>￥{$rs.price}元/人</p>
                                </a>
                            </li>
                        </volist> -->
                        <li v-for="rs in discounts" :key="rs.id">
                            <router-link :to="`/visa/details/${rs.id}`">
                                <div class="flag">
                                    <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                                </div>
                                <h4>{{ rs.title }}</h4>
                                <p>￥{{ rs.price }}元/人</p>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <div class="hot">
                    <div class="tittle">
                        <h3>旅游签证</h3>
                        <p><a href="javascript:void(0)">查看全部>></a></p>
                    </div>
                    <ul class="visa-con">
                        <!-- <volist name="hots" id="rs">
                            <li>
                                <a href="/visa/{$rs.id}.html">
                                    <div class="flag">
                                        <img src="https://admin.hqx.com.cn/Public/Uploads/{$rs.t_pic}" />
                                    </div>
                                    <h4>{$rs.title}</h4>
                                    <p>￥{$rs.price}元/人</p>
                                </a>
                            </li>
                        </volist> -->
                        <li v-for="rs in list" :key="rs.id">
                            <router-link :to="`/visa/details/${rs.id}`">
                                <div class="flag">
                                    <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                                </div>
                                <h4>{{ rs.title }}</h4>
                                <p>￥{{ rs.price }}元/人</p>
                            </router-link>
                        </li>
                    </ul>
                    <div>
                        【声明：本公司是一所专业的旅游代办机构，不隶属于领事馆政府，环球行网站致力于协助个人或者企业获得他们的旅行许可或短时间的入境停留。服务费均为领事馆所收，该费用包含各方面的帮助以及协助。
                        】
                    </div>
                </div>
                <!-- <div class="advert">
                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/advert.jpg" />
                </div> -->
                <div class="policy"></div>
            </div>
        </div>
        <web-footer />
        <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { visa_country, visa_items } from "@/api/travel";
import { useRouter } from "vue-router";

const router = useRouter();
// 国家列表
let country = ref({ '亚洲': [], '欧洲': [], '中东非': [], '美洲': [], '澳洲': [] });
let countryIndex = ref('亚洲')

let getCountry = async () => {
    country.value["亚洲"] = (await visa_country(49)).data.reverse();
    country.value["欧洲"] = (await visa_country(2)).data.reverse();
    country.value["中东非"] = (await visa_country(51)).data.reverse();
    country.value["美洲"] = (await visa_country(7)).data.reverse();
    country.value["澳洲"] = (await visa_country(50)).data.reverse();
    // countryIndex.value = "亚洲";
    localStorage.setItem('country', JSON.stringify(country.value));

}

let countryChange = (title) => {
    countryIndex.value = title;
}

let countryShow = computed(() => {
    return country.value[countryIndex.value];
})

// 搜索
let searchTitle = ref(
    [{
        title: '全部',
        id: ''
    }, {
        title: '旅游签证',
        id: '122'
    }, {
        title: '商务签证',
        id: '123'
    }, {
        title: '探亲签证',
        id: '124'
    }, {
        title: '留学签证',
        id: '125'
    }]
)
let searchIndex = ref({
    title: '签证类型',
    id: ''
},)

let searchChange = (index) => {
    searchIndex.value = searchTitle.value.find(item => item.id == index);
}
// 点击搜索
let searchValue = ref('');
const toSearch = () => {
    if (searchValue.value) {
        const routeUrl = router.resolve({
            name: 'visaSearch',
            query: {
                name: searchValue.value,
                type: searchIndex.value.id
            }
        })
        window.open(routeUrl.href, '_blank')
    }
}


// 当月优惠
let discounts = ref([]);
// let get_discounts = async () => {
//     let res = await visa_items({ limit: 42, type: 124 })
//     list.value = res.data;
// }

// 热门推荐
let hotList = ref([]);
let get_hot = async () => {
    // let res = await visa_items({ country: 102, area: 18, page: 1, limit: 100 })
    // hotList.value = res.data;
}

// 旅游签证
let list = ref([]);

let get_list = async () => {
    let res = await visa_items({ limit: 45, type: 122 })
    list.value = res.data.slice(6, -6);
    discounts.value = res.data.slice(-6)
    hotList.value = res.data.slice(0, 6);
}

onMounted(async () => {
    getCountry()
    get_hot()
    get_list()
})





</script>

<style lang="scss" scoped>
@import "../../css/main_visa_index.css";
</style>
